<template>
	<view class="juan">
		
		<view class="Nav flexBox">
			<view :class="num==index?'borderbotton':''" v-for="(item,index) in NavList" :key="index" @click="NavBtn(index)">{{item}}</view>
		</view>
		
		<view class="ticket" v-for="(item,index) in dataList" :key="index" @click="ToDeta(item.voucher_id)">
			<image v-if="num==0" class="ticketE" src="/static/images/kuaiguo.png" mode=""></image>
			<view class="ticketA">
				<view :class="num==1?'shiyong':''" class="ticketP Cfe0000"><span>￥</span>{{item.voucher_price}}</view>
			</view>
			<view class="ticketB">
				<view :class="num==1?'shiyong':''" class="ticketM Cfe0000">满{{item.voucher_limit}}可用</view>
				<view :class="num==1?'shiyong':''" class="ticketD Cfe0000">有效期：{{item.voucher_end_date |formaDate('yyyy-mm-dd')}}</view>
			</view>
			<view v-if="num==0" class="ticketC">
				去使用
			</view>
			<image v-if="num==1" class="ticketF" src="/static/images/shiyong.png" mode=""></image>
		</view>

		<view class="None" v-if="dataList.length<=0">
			<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				curpage:1,
				hasmore:false,
				cardid:"",
				storeOrplatform:"",
				platformType:"",
				ididid:"",
				iskaquan:1,//判断卡券
				shaixuanFlag:false,
				dhtkFlag:false,
				morenFlag:false,
				duihuanliangFlag:false,
				duihuanliangFlag2:true,
				jifenzhiFlag:true,
				jifenzhiFlag2:true,
				whethergot1:true,
				whethergot2:false,
				whethergot3:false,
				whethergot4:false,
				dataList:[],
				NavList:["未使用","已使用/已过期"],
				num:0,
				voucher_state:1
			}
		},
		
		onLoad() {
			this.myCard()
		},
		methods: {
			ToDeta(voucher_id){
				uni.navigateTo({
					url:"info?voucher_id="+voucher_id
				})
			},
			NavBtn(index){
				this.num=index
				this.curpage=1
				switch(this.num){
				    case 0:
				       this.voucher_state=1
				       break;
				    case 1:
				       this.voucher_state=2
				       break;
				   case 2:
				     this.voucher_state=3
				      break;
				  // case 3:
				  //   this.voucher_state=4
				  //    break;
				
				}
				this.myCard();
			},
			myCard(state){
				console.log(state,666666666)
				this.$util.request({
					url:'/mobile/index.php?act=member_voucher&op=voucher_list',
					method:'get',
					data:{
						curpage:this.curpage,
						pagesize:10,
						voucher_state:this.voucher_state
					}
				}).then(res=>{
					// if(res.datas.voucher_list.length == 0){
					// 	uni.showToast({
					// 		title:"没有数据哟～",
					// 		icon:"none"
					// 	})
					// }
					if(state){
						this.dataList=this.dataList.concat(res.datas.voucher_list)
					}else{
						this.dataList=res.datas.voucher_list
					}
					this.hasmore=res.datas.page.hasmore
				})
			},
			onReachBottom() {
				if(this.hasmore){
					this.curpage++;
					this.myCard(true)
				}else{
					uni.showToast({
						title:'已是最后一页！',
						icon:'none'
					})
				}
			},
			hidden(){
				this.shaixuanFlag=!this.shaixuanFlag
			},
			hidden2(){
				this.dhtkFlag=!this.dhtkFlag
			},
			
		
			
			gotTicket(store_id,voucher_t_range,voucher_t_rangeid,gc_name,is_more_goods,voucher_t_id){
				
				var that=this	
				if(is_more_goods == 1){
					uni.navigateTo({
						url:'/operation/voucher/productsLists?voucher_t_id='+voucher_t_id
					})
				}else{
				if(voucher_t_range==0){
					if(store_id){
						uni.navigateTo({
							url:"/mall/store/store?store_id="+store_id
						})
					}else{
						uni.switchTab({
							url:"/main/home/index"
						})
					}
					
				}else if(voucher_t_range==1){//商品
					if(voucher_t_rangeid){
						uni.navigateTo({
							url:"/mall/goods/info?goods_id="+voucher_t_rangeid.split(",")[0]
						})
					}

				}else if(voucher_t_range==2){//分类
					uni.navigateTo({
						url:"/mall/goods/list?thirdid="+voucher_t_rangeid+"&index="+gc_name
					})
				}
				}

			}
		}
	}
</script>

<style>
	.juan{
		height: 100%;
		background-color:#F5F5F5;
	}
	.flexBox{
		display: flex;
		justify-content: space-between;
	}
	.Nav view{
		width: 50%;
		text-align: center;
		line-height: 56rpx;
		background-color: #fff;
	}
	.borderbotton{
		border-bottom: 4rpx solid #ff4300;
	}
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.w21h31{
		width: 21upx;
		height: 25upx;
		position: relative;
		top: 6upx;
		left: 5upx;
	}
	.flex{
		
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-content: space-around;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.line1{
		width: 430upx;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.pr30{
		padding-right: 30upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fs30{
		font-size: 30upx
	}
	.fs26{
		font-size: 26upx
	}
	.fs28{
		font-size: 28upx
	}
	.fs30{
		font-size: 28upx
	}
	.fs24{
		font-size: 24upx
	}
	.fs20{
		font-size: 20upx
	}
	.fs22{
		font-size: 22upx
	}
	.fs21{
		font-size: 21upx
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.tac{
		text-align: center;
	}
	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}
	.top{
		padding: 0 20upx;
		height: 80upx;
		line-height: 80upx;
		background-color: #fff;		
	}
	.commonTop{
		height: 80upx;
		line-height: 80upx;
		text-align: center;
	}
	.sortway{
		width: 170upx;
	}
	.sort{
		width: 450upx;
	}
	.topRight{
		text-align: center;
		width: 90upx;
		height: 80upx;
		line-height: 80upx;
	}
	.topRight image{
		position: relative;
		top: 12upx;
	}
	.flex>view{
		padding: 0 35upx;		
	}
	.ticket{
		width: 612rpx;
		height: 180rpx;
		background: #fff;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		position: relative;
		margin: 30rpx 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}
	
	
	.active1{
		background-color: #ff4300;
		color: #FFFFFF;
	}
	
	/* 筛选 */
	.sxMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 100000;
	}
	.innerMask{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMask2{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMaskTop{
		padding:0 28upx;
		height: 83upx;
		line-height: 83upx;
		background-color: #fafafa;
		font-size: 21upx
	}
	.sx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 8upx;
		left: 5upx;
	}
	.innerMaskBottom{
		width: 100%;
		position: absolute;
		height: 80upx;
		bottom: 0;
		left: 0;
		
	}
	.innerMaskBottom button{
		height: 80upx;
		line-height: 80upx;
		width: 50%;		
		border: none;
		outline: none;
		border-radius: 0;
	}
	.innerMaskBottom1{
	
		background-color: #d2d2d2;
		color: #666666;
		font-size: 21upx
	}
	.innerMaskBottom2{
		background-color: #ff4300;
		color: #FFFFFF;		
		font-size: 21upx
	}
	.sxInput{
		width: 240upx;
		height: 70upx;
		background-color: #f0f0f0;
		border-radius: 5upx;
	}
	.sxblx{
		width: 60upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #666;
	}
	.innerMask2{
		width: 610upx;
		height: 350upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		top: 0;
		margin: 500upx auto;
		padding-top: 60upx;
		z-index: 100000;
	}
	.innerMask2Bs{
		width: 380upx;
		margin:60upx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.innerMask2Bs button{
		width: 160upx;	
		height: 60upx;
		border: none;
		outline: none;
	}
	.innerMask2B1{
		background-color: #ff4300;		
		color: #FFFFFF;
	}
	.innerMask2B2{
		background-color: #f0f0f0;
		color: #666666;
		border-color:#f0f0f0;
	}
	.ticketC{
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(134deg, #EA8C1E 0%, #E84A1D 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}
	.ticketP{
		font-size: 80rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #E96A1D;
	}
	.ticketP span{
		font-size: 40rpx;
	}
	.ticketM{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #323232;
	}
	.ticketD{
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #E96A1D;
	}
	.ticketE{
		width: 108.37rpx;
		height: 108.37rpx;
		position: absolute;
		left: 0;
		top: 0;
	}
	.ticketF{
		width: 192rpx;
		height: 144rpx;
	}
	.shiyong{
		color: #909090;
	}
	.None{
		height: 100%;
		width: 100%;
		background-color: #fff;
	}
</style>
